<template>
	<view class="pb20">
		<scroll-view scroll-y="true" @scroll="scroll" class="scroll" :style="{ height: height + 'px' }">
			<view class="navs borderbox">
				<!-- 2.0.19支持autoBack，默认为false -->
				<u-navbar
					:title="title"
					:autoBack="true"
					:bgColor="bgColor"
					:titleStyle="color"
					:leftIconColor="leftIconColor"
				></u-navbar>
				<view class="img dflex alc jcc fs50 white fw900">{{ sum }}</view>
				<view class="textc white fw900 fs30 mt18">{{ title + '总数据' }}</view>
			</view>
			<!-- 年级数据 -->
			<view class="dflex flexw" style="margin-top: 70rpx;">
				<view v-for="(itm, idx) in classes" :key="idx" style="width: 33.33%;margin-bottom: 80rpx;">
					<view class="dflex flexc alc jcc" @click="hangderChild(itm.cls, itm.name)">
						<view class="colora fs36 fw900">{{ itm.value }}</view>
						<view class="fs28 fw500 gray mt12">{{ itm.name }}</view>
					</view>
				</view>
			</view>
			<!-- 申报数量 -->
			<view class="apply-num mt30 pl30 pb20">
				<view><subtitle title="申报数量"></subtitle></view>
				<view class="num dflex alc mt30 mb20" v-for="(item, index) in dataList" :key="item.id">
					<ApplyNum :data="item"></ApplyNum>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn" @click="handerSubmit">立即申报</view>

			<!-- 弹窗 -->
			<u-popup round="30rpx" :show="show" @close="close" :duration="500" closeable>
				<view class="popup bannerbox">
					<view class="fs32 fw900 color textc pt40">{{ classNames + '各班级订购情况' }}</view>
					<view class="mt40">
						<view v-for="(item, index) in cls" :key="item.sid" class="dflex pl80 pr80 alc mb40">
							<view class="mr40 fs28 gray fw500">{{ item.name }}</view>
							<u-line-progress
								:percentage="item.num"
								activeColor="#4151DB"
								:showText="false"
							></u-line-progress>
							<view class="fs28 fw500 color">{{ item.num + '张' }}</view>
						</view>
					</view>
				</view>
			</u-popup>
		</scroll-view>
	</view>
</template>

<script>
import subtitle from '@/components/subtitle/subtitle.vue';
import ApplyNum from '../components/ApplyNum/ApplyNum.vue';
import dataList from './dataList';
export default {
	components: { subtitle, ApplyNum },
	data() {
		return {
			title: '', //学校名称
			classes: uni.getStorageSync('classes'), //每个年级的数量
			dataList: dataList.dataList, //模拟数据
			cls: [], //每个班的详细数据
			show: false,
			classNames: '',
			height: '', //监听页面滚动的距离
			bgColor: 'rgba(255,255,255,0)', //导航栏背景色
			color: 'color:#fff;fontWeight:bold', //文字颜色
			leftIconColor: '#fff' //左侧图标颜色
		};
	},
	methods: {
		// 提交按钮事件
		handerSubmit() {
			// console.log(this.dataList, this.title);
			uni.showToast({
				title: '申报成功',
				icon: 'none'
			});
		},
		// navbar返回上一页事件
		// 打开弹窗
		hangderChild(cls, name) {
			this.show = true;
			this.cls = cls;
			this.classNames = name;
			this.bgColor = 'rgba(255,255,255,1)';
			this.color = 'color:#000;fontWeight:bold';
			this.leftIconColor = '#000';
		},
		close() {
			this.show = false;
			this.bgColor = 'rgba(255,255,255,0)';
			this.color = 'color:#fff;fontWeight:bold';
			this.leftIconColor = '#fff';
		},
		scroll(e) {
			if (e.detail.scrollTop > 248) {
				this.bgColor = 'rgba(255,255,255,1)';
				this.color = 'color:#000;fontWeight:bold';
				this.leftIconColor = '#000';
			}
			if (e.detail.scrollTop < 248) {
				this.bgColor = 'rgba(255,255,255,0)';
				this.color = 'color:#fff;fontWeight:bold';
				this.leftIconColor = '#fff';
			}
		}
	},
	computed: {
		sum() {
			return this.classes.reduce((s, el) => {
				return el.value + s;
			}, 0);
		}
	},
	onLoad(options) {
		this.title = options.school;
		var that = this;
		uni.getSystemInfo({
			success(res) {
				that.height = res.windowHeight;
			}
		});
	}
};
</script>

<style lang="scss" scoped>
.navs {
	width: 750rpx;
	height: 584rpx;
	background-image: url('../images/bgggg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-top: 120rpx;
}
.img {
	width: 268rpx;
	height: 299rpx;
	background-image: url('../images/studydata.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
}
.apply-num {
	.num {
		width: 670rpx;
		height: 170rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}
}
.btn {
	width: 690rpx;
	height: 100rpx;
	margin: 0 auto;
	margin-top: 110rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	border-radius: 10rpx;
	line-height: 100rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	margin-bottom: 20rpx;
}
.popup {
	width: 750rpx;
	background: #ffffff;
	border-top-right-radius: 30rpx;
	border-top-left-radius: 30rpx;
}
::v-deep .u-icon__icon {
	position: absolute;
	top: 22rpx !important;
	font-size: 36rpx !important;
	right: 40rpx;
}
::v-deep .u-line-progress__background {
	background-color: #fff !important;
}

::v-deep .u-navbar__content__left {
	left: 48rpx !important;
}
</style>
